<template>
  <div>
    <div class="box">
      <div class="item">
        <container-nav :treeData="categoryTreeData"
                       :loading="treeLoading"
                       :setLabelId="leftCategoryProp"
                       :defaultExpandAll="true"
                       @handleNodeClick="handleLeftNodeClick"></container-nav>
      </div>

      <div class="item">
        <container-nav :treeData="departmentData"
                       :loading="treeCenterLoading"
                       :defaultExpandAll="true"
                       :setLabelId="centerProp"
                       @handleNodeClick="handleCenterNodeClick"></container-nav>
      </div>

      <div class="item">
        <div class="title">
          <el-button size="small"
                     type="primary"
                     @click="handleAdd('add')"
                     icon="el-icon-circle-plus-outline">新增
          </el-button>
          <!--<el-button size="small" type="danger" @click="handleDel" plain icon="el-icon-delete">删除</el-button>
          <el-button size="small" icon="el-icon-upload" @click="handleAdd('import')">导入</el-button>
          <el-button size="small" icon="el-icon-download">导出</el-button>-->
        </div>
        <h4>实体分类号</h4>
        <div class="list">
          <avue-tree red="tree"
                     :option="rightOption"
                     :loading="treeRightLoading"
                     :data="entityData"
                     :expand-on-click-node="false"
                     @node-click="handleRightNodeClick"
                     v-model="form">
            <div class="el-tree-node__label" slot-scope="{ node, data }">
              <span class="label-span">
                <i v-if="data.icon" :class="data.icon"></i>
                {{ (node || {}).label }}
              </span>
              <el-button type="text"
                         class="edit"
                         style="margin-left: 30px"
                         @click="handleAdd('edit')"
                         icon="el-icon-edit"> </el-button>
              <el-button type="text"
                         class="edit"
                         style="margin-left: 10px;color: red"
                         @click="handleDel(data)"
                         icon="el-icon-delete"> </el-button>
            </div>
          </avue-tree>
        </div>
      </div>
    </div>

    <el-dialog :title="dialogTitle"
               :width="dialogWidth"
               top="5vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogShow">
      <div class="import-content">
        <add-classification v-if="type === 'add' || type === 'edit'"
                            :type="type"
                            :saveLoading="saveLoading"
                            :rowData="rightData"
                            @handleSubmit="handleSubmit"
                            @handleCancel="dialogShow = false">
        </add-classification>

        <div class="import" v-if="type==='import'">
          <div class="explain">
            <label>注：</label>
            <div>
              <p>1. 发文件名不能包含中文，可能导致异常；</p>
              <p>2. 只支持格式 TXT, 且不超过5M</p>
            </div>
          </div>
          <el-upload
            class="yuyi-upload"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div class="footer">
            <el-button type="primary" size="small">导入</el-button>
            <el-button @click="dialogShow = false" size="small">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContainerNav from '../../../../components/containerNav/containerNav'
import AddClassification from '../settingComponents/classification/addClassification'
import { getCategoryTree } from '../../../../api/category/category'
import { getQzOrg } from '../../../../api/user/userSet'
import {
  addClassificationTree,
  delClassificationTree,
  editClassificationTree,
  getClassificationTree
} from '../../../../api/classification'
import { mapActions } from 'vuex'

export default {
  name: 'Classification',
  components: {
    AddClassification,
    ContainerNav
  },
  data () {
    return {
      dialogTitle: '分类信息',
      dialogWidth: '600px',
      dialogShow: false,
      saveLoading: false, // 新增保存loading
      type: 'add',
      idCategory: '', // 门类id
      idOrg: '', // 全宗id
      fileList: [],
      leftCategoryProp: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      treeLoading: true,
      categoryTreeData: [],
      treeCenterLoading: true,
      departmentData: [], // 中间树形数据
      centerProp: {
        label: 'orgName',
        value: 'id',
        children: 'aaa'
      },
      treeRightLoading: false,
      entityData: [
        /* {
          value: '',
          label: '实体分类号',
          icon: 'el-icon-tickets',
          path: '/archivesManage/electronicsFile/book',
          children: [
            {
              value: 1,
              label: '铜梁区县'
            }, {
              value: 2,
              label: '铜梁区县委'
            }, {
              value: 3,
              label: '铜梁区县纪委'
            }, {
              value: 4,
              label: '铜梁区县妇女联合会'
            }
          ]
        } */
      ], // 右边实体分类号树
      rightProp: {
        label: 'categoryName',
        value: 'id',
        children: 'children'
      },
      rightData: {}, // 右侧实体分类号选中数据
      form: {}
    }
  },
  mounted () {
    this.setNavNarrow(true)
    this.getLeftCategory()
  },
  computed: {
    rightOption () {
      return {
        defaultExpandAll: true,
        menu: false,
        filter: false,
        props: this.rightProp
      }
    }
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getLeftCategory () {
      // 左侧获取门类
      getCategoryTree('sysModel', this.$route.query.isNotAjJnNode).then(res => {
        this.categoryTreeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
      getQzOrg().then(res => {
        this.departmentData = res.data.data
        this.treeCenterLoading = false
      }).catch(() => {
        this.treeCenterLoading = false
      })
    },
    handleLeftNodeClick (val) {
      // 左边门类选择查询
      if (val.idCategory) {
        this.idCategory = val.idCategory
        this.idOrg = ''
        this.rightData = {}
        this.getRightClassification()
      }
    },
    handleCenterNodeClick (val) {
      // 中间全宗部门选择查询， 单选全宗部门不查数据
      this.idOrg = val.id
      this.rightData = {}
      if (this.idCategory) {
        this.getRightClassification()
      }
    },
    handleRightNodeClick (val) {
      // 右边为实体分类号
      this.rightData = val
    },
    getRightClassification () {
      const param = {}
      const query = {
        idCategory: this.idCategory,
        fondsNoId: this.idOrg
      }
      this.treeRightLoading = true
      getClassificationTree(query, param).then(res => {
        this.entityData = res.data.data
        this.treeRightLoading = false
      }).catch(() => {
        this.treeRightLoading = false
      })
    },
    handleAdd (type) {
      if (type === 'add') {
        if (!this.idCategory) {
          this.$message.warning('请选中左侧门类之后进行新增！')
          return
        }
      }
      this.type = type
      this.dialogShow = true
      this.dialogTitle = type === 'add' ? '分类信息' : '导入'
    },
    handleSubmit (form) {
      // 新增提交
      this.saveLoading = true
      let request = null
      if (this.type === 'add') {
        form.idCategory = this.idCategory
        form.fondsNoId = this.idOrg
        form.pid = this.rightData.id ? this.rightData.id : 0
        request = addClassificationTree(form)
      } else {
        // 修改
        request = editClassificationTree(form)
      }
      request.then(() => {
        this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功！')
        this.getRightClassification()
        this.saveLoading = false
        this.dialogShow = false
      }).catch(() => {
        this.saveLoading = false
      })
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleDel (data) {
      // 删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delClassificationTree(data.id).then(() => {
          this.getRightClassification()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .box {
    @include fj;
    align-items: center;
    margin: 0 -14px;

    .item {
      height: calc(100vh - 80px);
      background: #fff;
      overflow-y: auto;
      border-radius: 6px;
      flex: 1;
      margin: 0 8px;
      padding: 0 10px;

      &:last-child {
        min-width: 350px;
      }

      .title {
        padding: 10px 15px;
        white-space: nowrap;
      }

      .list {
        margin-top: 5px;
        overflow-y: auto;
        ::v-deep .avue-tree{
          height: calc(100vh - 175px);
          .el-tree-node__label{
            width: 100%;
            .edit{
              display: none;
            }
            &:hover{
              .edit{
                display: inline-block;
              }
            }
          }
        }
      }

    }
  }
  .import{
    .explain{
      display: flex;
      color: #999;
      font-size: 12px;
      line-height: 22px;
      label{
        color: #F56C6C;
        font-weight: bolder;
      }
    }
    .yuyi-upload{
      margin: 20px 0 50px 24px;
    }
    .footer{
      text-align: right;
    }
  }
</style>
